<template>
  <div class="col w lter b-r fstree" v-loading="ifSub">
    <div class="wrapper b-b">
      <div class="font-thin h4">
        <a class="btn-danger btn btn-sm font-bold" @click="loadTree()">部门树</a>
      </div>
    </div>
    <div class="treeStyles" :style="{height:bodyHeight-89+'px'}">
      <ul id="sys-department-tree" class="ztree" style="margin-top: 0;"></ul>
    </div>
    <div style="clear: both;"></div>
    <div style="display: none">{{userTabState}}</div>
  </div>
</template>
<script>

  import $ from 'jquery'
  import '../../../../plugins/zTree/css/zTreeStyle/fs_zTreeStyle.css'
  import '../../../../plugins/zTree/js/jquery.ztree.all.min'
  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'
  import {updateDepartmentChoose} from './update.choose'
  import {ROUTE_URL} from '../../../../router/routes'

  export default{
    props: ["type"],
    data(){
      return {
        "ifSub": true,
        treeObj: null
      }
    },
    computed: {
      bodyHeight(){
        return this.$store.state.bodyHeight;
      },
      userTabState(){
        if (this.$store.state.userModule && this.treeObj) {
          if (this.$store.state.userModule["chooseState"] > 0) {
            const treeNode = this.treeObj.getNodeByParam("id",
              this.$store.state['sysUserDepartmentPid']);
            this.treeObj.selectNode(treeNode);
          }
        }
        return 0;
      }
    },
    mounted(){
      this.loadTree();
      //$(".treeStyles").scrollUnique();
    },
    methods: {
      getOne(treeNode){
        if (this.type === "department") {
          updateDepartmentChoose(this, treeNode);
        } else {
          //判断表格是否正在加载操作
          if (!this.$store.state['sysUserTableLoading']) {
            this.$router.push(ROUTE_URL.user.tab.absolutePath + treeNode.id);
          } else {
            this.$message.warning({
              showClose: true,
              message: "操作进行中，请稍后再试！"
            })
            const treeNode = this.treeObj.getNodeByParam("id",
              this.$store.state['sysUserDepartmentPid']);
            this.treeObj.selectNode(treeNode);
          }
        }
      },
      loadTree(){
        let mouseClick = 0;
        let treeNodeId;
        const self = this;
        const setting = {
          check: {enable: false},
          view: {
            selectedMulti: false
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onClick: function (treeId, treeName, treeNode) {
              if (treeNodeId == treeNode.id) {
                if ((treeId.timeStamp - mouseClick) < 500) {
                  mouseClick = treeId.timeStamp;
                  treeNodeId = treeNode.id;
                  return;
                }
              }
              treeNodeId = treeNode.id;
              mouseClick = treeId.timeStamp;
              //                if(treeNode.isParent){
              //                    treeObj.expandNode(treeNode);
              //                }
              self.getOne(treeNode);
            }
          }
        };
        let treeObj;
        Vue.submit(self, {
          url: SERVICE_URLS.department.tree,
          data: {},
          noTips: true,
          callback: function (data) {
            $.fn.zTree.init($("#sys-department-tree"), setting, data.body);
            treeObj = $.fn.zTree.getZTreeObj("sys-department-tree");
            let treeNode;
            if (self.type != "department" && self.$store.state['sysUserDepartmentPid']) {
              treeNode = treeObj.getNodeByParam("id",
                self.$store.state['sysUserDepartmentPid']);
            }
            if (!treeNode) {
              treeNode = treeObj.getNodes()[0];
            }
            treeObj.selectNode(treeNode);
            treeObj.expandNode(treeNode);
            self.treeObj = treeObj;
            self.$store.commit('cacheDataUpdate', {
              name: 'treeObj',
              value: treeObj
            })
            self.getOne(treeNode);
          }
        }, Vue)
      }
    }
  }
</script>
